<template>
  <button class="button yu-bgColor-two yu-bgColor-two-hover" :disabled="disabled">
    <span v-if="title">{{ title }}</span>
    <slot v-else></slot>
  </button>
</template>

<script setup>
import {useStore} from "@/store/index"

const store = useStore()
const props = defineProps({
  title: String,
  padding: {
    type: String,
    default: '5px 10px'
  },
  borderR: {
    type: String,
    default: '5px'
  },
  height: {
    type: String,
    default: '45px'
  },
  margin: {
    type: String,
    default: '0px'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

</script>

<style scoped lang="scss">

.button {
  height: v-bind(height);
  border-radius: v-bind('props.borderR');
  outline: none;
  border: 0;
  padding: v-bind('props.padding');
  letter-spacing: 0.2em;
  font-size: 14px;
  margin: v-bind(margin);
  cursor: pointer;
  &:disabled {
    background-color: v-bind('store.theme.secondaryBgColor');
    cursor: not-allowed;
  }
}
</style>
